<template>
  <div>

    <div class="tooproof"
         @click="tooproof">
      <img src="../../../static/imgs/tooproof.png"
           alt="">
    </div>
    <!-- header组件 -->
    <v-header @back="onBack"
              ref="headTitle"
              :title="shopInfo.shopname"></v-header>
    <div class="menu"
         ref="menu">


        <div class="top"
             ref="top">
          <!-- 搜索栏 -->
          <div ref="search"
               class="search">
            <input :placeholder="$t('message.Menu_lookingfortheproduct')"
                   :value="search"
                   @input="onInput">
            <img v-if="search"
                 src="../../../static/imgs/close.png"
                 @click="search=''">
          </div>
          <!-- 搜索结果 -->
          <div class="search-results"
               v-if="search"
               :style="{'height': searchMinHeight + 'px'}">
            <div class="title">({{foodsWithKeyword.length}})</div>
            <ul>
              <li v-for="(food, index) in foodsWithKeyword"
                  :key="index">
                <div class="name-price">
                  <div class="name">{{food.name}} <span v-if="food.remarks !== '$t(message.no)'">{{food.remarks}}</span></div>
                  <div class="description">{{food.instro}}</div>
                  <combo v-if="addCartId === food.id"
                         :food="food"
                         :currency-default="shopInfo.currencydefault"
                         @close="addCartId = ''"
                         @add="addCartWithSpecial"></combo>
                  <div class="price-cart">
                    <div class="price-box">
                      <div class="old-price"></div>
                      <div class="price">{{shopInfo.currencydefault}} {{food.cost}}</div>
                    </div>

                    <div class="cart-wrapper">
                      <menu-control :food="food"
                                    @add="addCart"
                                    @dec="decCart"></menu-control>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 店铺信息 -->
          <div class="info">
            <div class="avatar">
              <img :src="shopInfo.shoplogo"
                   width="100%"
                   height="100%" />
            </div>
            <div class="info-wrapper"
                 style="width:143px">
              <div class="title">
                <div class="shop-name">{{shopInfo.shopname}}</div>
                <div class="discount"
                     v-if="discount">
                  <span>-{{discount*100}}%</span>
                </div>
              </div>
              <div class="progress-bar">
                <div class="progress"
                     :style="{'width':`${discount/0.1*2}rem`}"></div>
              </div>
            </div>
            <div style="font-size:12px;overflow: hidden;">{{bulletinboard(shopInfo)}} </div>
          </div>

        </div>
        <!-- 分类栏 -->
        <div class="sticky-bar"
             ref="stickyBar"
             :class="{'fix': isFix, 'ios-fix':iosFix}">
          <div class="tab-item"
               v-for="(item,index) in menuData"
               @click="menuClick(index)"
               :class="{'current': activeIndex === index}"
               :key="index">{{taxonomy(item) }}</div>
        </div>
    

				    <!-- 'marginTop': `${contentMarginTop}px`   'marginTop': `${4}rem`-->
      <!-- 菜单列表 -->
      <div class="content"
           :style="{
				    'minHeight': `${contentMinHeight}px`,
				  
           'marginTop': `${contentMarginTop}px` 
			

				    }">
        <ul v-for="item in menuData"
            class="list-hook"
            :key="item.id">
          <div v-if="item.img"
               class="img-wrapper">
            <img :src="item.img"
                 width="100%"
                 height="100%">
          </div>
          <div class="title"><span>{{titledish(item)}}</span></div>
          <li v-for="(food, index) in item.det"
              :key="index">
            <div class="name-price">

              <div class="name"><span v-if="food.img"> <img id="campinghade"
                       :src="(food.img).replace(/hiroaus/,'order')"
                       alt=""></span> {{dishname(food)}} <span v-if="food.remarks !== '暂无'">&nbsp;&nbsp;{{food.remarks}}</span></div>
              <div class="description"
                   v-html='dishdescription(food)'></div>

              <combo v-if="addCartId === food.id"
                     :food="food"
                     :currency-default="shopInfo.currencydefault"
                     @close="addCartId = ''"
                     @add="addCartWithSpecial"></combo>
              <div class="price-cart">
                <div class="price-box">
                  <div class="old-price"></div>
                  <div class="price">{{shopInfo.currencydefault}} {{food.cost}}</div>
                </div>

                <div class="cart-wrapper">
                  <menu-control :food="food"
                                @add="addCart"
                                @dec="decCart"></menu-control>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <menu-shop-cart ref="shopCart"
                    :list-show="listShow"
                    :shop-info="shopInfo"
                    :total-count="totalCount"
                    :total-price="totalPrice"
                    @toggle="closeList"
                    @add="addNum"
                    @dec="decNum"
                    @empty="emptyCart">
    </menu-shop-cart>
  </div>
</template>

<script>

import vHeader from '../Common/Header'
import MenuShopCart from '../ShopCart/MenuShopCart'
import MenuControl from '../ShopCart/MenuControl'
import Combo from './Combo'
import { Toast } from 'vant'
import { mapMutations, mapState, mapGetters } from 'vuex'
import bus from '../../store/bus.js'

export default {
  name: 'Menu',

  data () {
    return {
      menuData: [], //  菜单数据
      isFix: false, //  吸顶
      headerHeight: 0,
      scrollTop: 0, //  已滚动长度
      scrollHeight: 0,  //  可滚动长度
      scrollWidth: 0, //  可滚动宽度
      switchBarHeight: 0, //  菜单栏高度
      throttleScroll: null, //  节流滚动
      listHeight: [],  //  每个分类下的高度
      barsWidth: [],  //  每个分类名的宽度
      activeIndex: 0, //  被点击的分类名
      headTitleHeight: 0, //  head组件的高度
      addCartId: '',  //  被选中的套餐菜品
      foodsWithKeyword: [], //  搜索结果
      search: '', //  搜索
      preScrollTop: '', //  上一次滚动的位置
      searchMinHeight: '',
      show: false,
      isIos: false,
      iosFix: true,
      languageNum: 0,

    }
  },

  props: {
    shopInfo: {
      type: Object
    },
    discount: {
      type: Number
    }
  },
  components: {
    vHeader,
    MenuControl,
    Combo,
    MenuShopCart,
  },

  mounted () {

    let lan = localStorage.getItem("lan");
    if (lan) {
      this.$i18n.locale = lan
    }

  },

  created () {
    this.languageNum = this.$store.getters.takelanguager
    this.getMenu()
    //  判断iPhone|iPad|iPod|iOS
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
      this.isIos = true
    }
    this.$nextTick(() => {
      //  头部组件高度
      this.headTitleHeight = this.$refs.headTitle.$el.clientHeight
      //  搜索结果高度
      this.searchMinHeight = document.documentElement.clientHeight - this.headTitleHeight - this.$refs.search.offsetHeight
    })
  },
  activated () {
    //  判断是否有滚动scrollTop
    if (this.scrollTop) {
      this.$refs.menu.scrollTop = this.scrollTop
    }
    this.$nextTick(() => {
      // 节流监听滚动事件
      this.$refs.menu.addEventListener('scroll', this.throttleScroll, false)
    })
    this.throttleScroll = _.throttle(this.handleScroll, 100)
  },
  deactivated () {
    this.$refs.menu.removeEventListener('scroll', this.throttleScroll)
  },
  methods: {
    taxonomy (item) {
      switch (this.languageNum) {
        case 0:
          return item.name
        case 1:
          return item.en_name
        case 2:
          return item.zh_cn_name
        case 3:
          return item.de_name
      }
    },
    dishname (food) {
      switch (this.languageNum) {
        case 0:
          return food.name
        case 1:
          return food.en_name
        case 2:
          return food.zh_cn_name
        case 3:
          return food.de_name
      }
    },
    titledish (item) {

      switch (this.languageNum) {
        case 0:
          return item.name
        case 1:
          return item.en_name
        case 2:
          return item.zh_cn_name
        case 3:
          return item.de_name
      }
    },
    dishdescription (food) {
      let desc = food.instro;

      switch (this.languageNum) {
        case 0:
          desc = food.instro
          break;
        case 1:
          desc = food.zh_desc
          break;
        case 2:
          desc = food.en_desc
          break;
        case 3:
          desc = food.de_desc
          break;
      }


      let desc_arr = desc.split("|");
      let desc_dom = "";
      for (let i = 0; i < desc_arr.length; i++) {
        if (desc_arr[i].lenght == 0) {
          continue;
        }
        desc_dom += (desc_arr[i] + "<br>")
      }

      return desc_dom;

    },

    bulletinboard (notice) {
      switch (this.languageNum) {
        case 0:
          return notice.notice_info
        case 1:
          return notice.en_notice_info
        case 2:
          return notice.de_notice_info
        case 3:
          return notice.zn_notice_info
      }
    },

    ...mapMutations([
      'ADD_CART',
      'DEC_CART',
      'EMPTY'
    ]),
    //  体验优化，异步执行下落动画
    drop (target) {
      this.$nextTick(() => {
        this.$refs.shopCart.drop(target);
      })
    },
    //  清空购物车
    emptyCart () {
      this.EMPTY()
      this.show = false
    },
    //  搜索框返回搜索结果
    onInput (e) {
      this.search = e.target.value
      let foodsWithKeyword = []
      this.menuData.forEach(({ det }) => {
        //  都转成大写，达到忽略大小写
        foodsWithKeyword = [...foodsWithKeyword, ...det.filter(({ name }) => name.toUpperCase().includes(e.target.value.toUpperCase()))]
      })
      this.foodsWithKeyword = foodsWithKeyword
    },
    onBack () {
      this.$router.push({
        path: '/home',
        query: {
          code: this.$route.query.code
        }
      })
    },
    closeList () {
      this.show = !this.show
    },
    addCartWithSpecial (food, options, comboPrice) {
      if (food.goods_spec.length !== options.length) {
        Toast('Bitte wählen Sie die komplette Mahlzeit aus')
      } else {
        this.ADD_CART({ food, options, price: comboPrice })
        this.addCartId = ''
      }
    },
    //  菜单列表、详情菜品减少
    decCart (food, disableDec) {
      if (food.goods_spec.length > 0 && disableDec) {
        Toast({
          message: 'Combo kann nur in der Warenkorbliste gelöscht werden',
          duration: 1e3
        })
        this.show = true
        return
      }
      this.DEC_CART(food)
    },

    addCart (food, target) {
      // 套餐
      if (food.goods_spec.length) {
        this.addCartId = food.id
      } else {
        this.ADD_CART({ food })
        this.drop(target)
      }
    },
    //  购物车列表菜品减少
    decNum (food) {
      this.DEC_CART(food)
    },
    //  购物车列表菜品添加
    addNum (food) {
      this.ADD_CART({ food })
    },
    //  获取菜单
    getMenu () {
      this.$http.get(`${this.$REQ_URL}ctrl=shop&action=jmGetGoodsType&id=${this.$SHOP_ID}`)
        .then(res => {
          this.menuData = res.data

          this.$nextTick(() => {
            this.calculateHeight()
          })
        })
        .catch(err => {

        })
    },
    calculateHeight () {
      let list = document.getElementsByClassName('list-hook')
      let bars = document.getElementsByClassName('tab-item')
      let height = 0
      let width = 0
      this.listHeight.push(height)
      this.barsWidth.push(width)
      for (let i = 0, l = list.length; i < l; i++) {
        let item = list[i]//  每一个item都是刚才获取的food的每一个dom
        let bar = bars[i]
        width += bar.clientWidth
        height += item.offsetHeight//  主要是为了获取每一个foods内部块的高度
        this.barsWidth.push(width)
        this.listHeight.push(height)
      }
    },
    //  滚动处理
    handleScroll () {
      this.setData()
      //  判断是否吸顶效果
      if (this.scrollTop >= this.headerHeight) {
        // if (this.isIos) {
        //   this.iosFix = true
        // }else {
        this.isFix = true
        // }
      } else {
        this.iosFix = false
        this.isFix = false
      }
      if (this.scrollWidth > document.body.clientWidth) {
        if (this.activeIndex != this.menuData.length) {
          this.$refs.stickyBar.scrollTo(this.barsWidth[this.activeIndex] - 30, 0)
        }
      }
    },
    setData () {
      this.headerHeight = this.$refs.top.clientHeight
      this.switchBarHeight = this.$refs.stickyBar.offsetHeight
      this.scrollWidth = this.$refs.stickyBar.scrollWidth
      this.scrollTop = this.$refs.menu.scrollTop
      // this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      this.scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      for (let i = 0; i < this.listHeight.length; i++) {
        let topHeight = this.listHeight[i]
        let bottomHeight = this.listHeight[i + 1]
        if (this.scrollTop - this.headerHeight >= topHeight && this.scrollTop - this.headerHeight < bottomHeight) {
          this.activeIndex = i
          return
        }
      }
      this.activeIndex = 0
      return
    },
    //  点击分类
    menuClick (index) {
      this.activeIndex=index
      this.$refs.menu.scrollTo(0, this.listHeight[index] + this.headerHeight)
      // this.$refs.menu.scrollTo(0, this.listHeight[index]-30)

    },
    // 回到顶部
    tooproof () {
      this.$refs.menu.scrollTop = 0
    }
  },

  watch: {
    addCartId (val) {
      if (val) {
        this.preScrollTop = document.scrollingElement.scrollTop
        let cssStr = 'position: fixed; height: 100%; width: 100%'
        document.body.style.cssText = cssStr
        window.removeEventListener('scroll', this.throttleScroll)
        document.body.style.top = `${-this.preScrollTop}px`
      } else {
        let cssStr = 'height: auto;'
        document.body.style.cssText = cssStr
        window.addEventListener('scroll', this.throttleScroll, false)
        document.scrollingElement.scrollTop = this.preScrollTop
      }
    },
    listShow (val) {
      if (val) {
        if (!this.search) {
          this.preScrollTop = document.scrollingElement.scrollTop
          let cssStr = 'position: fixed; height: 100%; width: 100%'
          document.body.style.cssText = cssStr
          window.removeEventListener('scroll', this.throttleScroll)
          document.body.style.top = `${-this.preScrollTop}px`
        }
      } else {
        if (!this.search) {
          let cssStr = 'height: auto;'
          document.body.style.cssText = cssStr
          window.addEventListener('scroll', this.throttleScroll, false)
          document.scrollingElement.scrollTop = this.preScrollTop
        }
      }
    },
    search (val) {
      if (val) {
        this.preScrollTop = document.scrollingElement.scrollTop
        let cssStr = 'position: fixed; height: 100%; width: 100%'
        document.body.style.cssText = cssStr
        window.removeEventListener('scroll', this.throttleScroll)
        document.body.style.top = `${-this.preScrollTop}px`
      }
      else {
        let cssStr = 'height: auto;'
        document.body.style.cssText = cssStr
        window.addEventListener('scroll', this.throttleScroll, false)
        document.scrollingElement.scrollTop = this.preScrollTop
      }
    },
  },
  computed: {
    ...mapState([
      'cartFoods'
    ]),
    ...mapGetters([
      'totalPrice', 'totalCount'
    ]),
    // takelanguager () {
    //   this.languageNum = takelanguager
    // },
    listShow () {
      if (this.totalCount === 0) {
        this.show = false
        return false
      } else {
        return this.show
      }
    },
    contentMinHeight () {
      const windowHeight = document.documentElement.clientHeight
      return this.isFix ? windowHeight - this.switchBarHeight : windowHeight - this.headerHeight - this.switchBarHeight
    },
    contentMarginTop () {
      return this.isFix ? this.switchBarHeight : 0
    },

  },
  watch: {

  },

  filters: {}
}
</script>

<style scoped lang="scss">
@import "../../../static/css/mixin";
.menu {
  position: absolute;
  top: 1.28rem;
  bottom: 1rem;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  .name {
    display: flex;
    align-items: center;
  }
  #campinghade {
    width: 2rem;
    height: 2rem;
    margin-left: 0;
  }
  .top {
    height: 3rem;
    // position: fixed;
    background: #fff;
    // z-index: 999;
    .search {
      margin: $commonPadding;
      padding: 0.24rem 0;
      @include fa();
      input {
        @include whl(6.68rem, 1rem);
        background: $fc;
        border-radius: 0.12rem;
        box-shadow: 0 0.06rem 0.1rem 0 rgba(0, 0, 0, 0.1);
      }
      img {
        margin-left: 0.2rem;
        @include wh(0.32rem);
      }
    }
    .search-results {
      z-index: 40;
      position: fixed;
      left: 0;
      top: 2.76rem;
      width: 100%;
      padding-bottom: 1rem;
      background-color: $fc;
      overflow-y: scroll;
      border-top: 0.3rem solid $bc;
      .title {
        height: 1.2rem;
        line-height: 1.2rem;
        padding: 0 0.4rem;
        @include fscfw(0.36rem);
      }
      li {
        padding: 0.16rem 0.4rem 0.42rem;
        border-bottom: 1px solid $bc;
        position: relative;
        top: 0;
        left: 0;
        &:last-child {
          border-bottom: none;
        }
        .name-price {
          @include fj();
          flex-direction: column;
          .name {
            /*flex: 0 0 3.62rem;*/
            padding-top: 0.28rem;
            @include fscfw(0.36rem);
            span {
              @include fsc(0.28rem, red);
            }
            img {
              margin-left: 0.14rem;
              @include wh(0.28rem);
            }
          }
          .description {
            width: 100%;
            margin: 0.22rem 0 0;
            font-size: 0.32rem;
          }
          .price-cart {
            @include fja();
            .price-box {
              .old-price {
                height: 0.4rem;
                line-height: 0.4rem;
                @include fsc(0.28rem, #969696);
                /*删除线*/
                text-decoration: line-through;
              }
              .price {
                height: 0.66rem;
                line-height: 0.66rem;
                @include fscfw(0.48rem, #e80d27);
              }
            }
            .cart-box {
              @include fja();
              .dec-cart {
              }

              .btn {
                width: 1.2rem;
                height: 0.8rem;
                & .add-cart {
                  background: url("../../../static/imgs/add_active.png");
                  width: 1.2rem;
                  height: 0.8rem;
                }
              }
              .num {
                padding: 0 0.36rem;
                @include fscfw(0.4rem);
              }
            }
          }
        }
        .food-package {
          .type {
            width: 100%;
            margin-top: 0.22rem;
            font-size: 0.26rem;
            color: rgba(136, 136, 136, 1);
          }
          .category {
            background-color: $bc;
            padding: 0.33rem 0.56rem;
            .name {
              font-weight: 600;
              height: 0.4rem;
              line-height: 0.4rem;
            }
          }
          .btn-op {
            margin-top: 0.52rem;
            @include fa();
            height: 0.64rem;
            justify-content: flex-end;
            .cancel {
              color: $blue;
              margin-right: 0.56rem;
            }
            .price {
              @include fa();
              padding: 0.08rem 0.18rem;
              background: $blue;
              border-radius: 0.08rem;
              color: $fc;
              height: 0.64rem;
              span {
                padding-right: 0.1rem;
                border-right: 1px solid $fc;
              }
              img {
                margin-left: 0.1rem;
                @include wh(0.32rem);
              }
            }
          }
        }
      }
    }
    .info {
      margin-top: 0.48rem;
      padding: $commonPadding;
      height: 0.96rem;
      display: flex;
      .avatar {
        flex: 0 0 0.96rem;
        height: 0.96rem;
      }
      .info-wrapper {
        flex: 1;
        display: flex;
        padding-left: 0.2rem;
        flex-direction: column;
        justify-content: space-between;
        .title {
          width: 3.86rem;
          display: flex;
          align-items: center;
          .shop-name {
            margin-right: 0.2rem;
            height: 0.44rem;
            line-height: 0.44rem;
            @include fscfw(0.32rem, rgba(0, 0, 0, 1));
          }
          .discount {
            text-align: center;
            font-size: 0.2rem;
            color: #fff;
            font-weight: 600;
            width: 0.84rem;
            height: 0.32rem;
            line-height: 0.32rem;
            padding-left: 0.1rem;
            background: url("../../../static/imgs/discount.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        .progress-bar {
          width: 2rem;
          height: 0.08rem;
          margin: auto 0;
          background: #f0f0f0;
          border-radius: 0.04rem;
          .progress {
            height: 0.08rem;
            background: #ed4126;
            border-radius: 0.04rem;
          }
        }
      }
    }
  }
  .sticky-bar {
    @include whl(100%, 1.2rem);
    // margin-top: 2.9rem;
    z-index: 99;
    background:#fff;
    // position: fixed;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: auto;
    background: #f2f9ef;
    &::-webkit-scrollbar {
      display: none;
    }
    &.fix {
      position: fixed;
      left: 0;
      top: 1.28rem;
      z-index: 10;
    }
    &.ios-fix {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 10;
    }
    .tab-item {
      white-space: nowrap;
      padding: 0 0.22rem;
      font-size: 0.36rem;
      font-weight: 400;
      &:first-child {
        padding: 0 0.22rem 0 0.4rem;
      }
      &:last-child {
        padding: 0 0.4rem 0 0.22rem;
      }
      &.current {
        font-weight: 600;
        color: $tc;
      }
    }
  }
  .content {
    // margin-top: 4rem;
    /*margin-bottom: 1rem;*/
    .list-hook {
      list-style: none;
      border-bottom: 0.3rem solid $bc;
      .img-wrapper {
        height: 1.6rem;
      }
      .title {
        height: 1.2rem;
        padding: 0 0.4rem;
        @include fscfw(0.32rem);
        @include fa();
        span {
          padding-left: 0.16rem;
          border-left: 0.08rem solid $tc;
          font-weight: 600;
        }
      }
      li {
        padding: 0.16rem 0.4rem 0.42rem;
        border-bottom: 1px solid $bc;
        position: relative;
        top: 0;
        left: 0;
        &:last-child {
          border-bottom: none;
        }
        .name-price {
          @include fj();
          flex-direction: column;
          .name {
            /*flex: 0 0 3.62rem;*/
            // padding-top: 0.28rem;
            @include fscfw(0.36rem);
            span {
              @include fsc(0.28rem, red);
            }
            img {
              margin-left: 0.14rem;
              @include wh(0.28rem);
            }
          }
          .description {
            width: 100%;
            margin: 0.22rem 0 0.5rem;
            font-size: 0.32rem;
          }
          .price-cart {
            @include fja();
            .price-box {
              .old-price {
                height: 0.4rem;
                line-height: 0.4rem;
                @include fsc(0.28rem, #969696);
                /*删除线*/
                text-decoration: line-through;
              }
              .price {
                height: 0.66rem;
                line-height: 0.66rem;
                @include fscfw(0.48rem, #e80d27);
              }
            }
            .cart-box {
              @include fja();
              .dec-cart {
              }

              .btn {
                width: 1.2rem;
                height: 0.8rem;
                & .add-cart {
                  background: url("../../../static/imgs/add_active.png");
                  width: 1.2rem;
                  height: 0.8rem;
                }
              }
              .num {
                padding: 0 0.36rem;
                @include fscfw(0.4rem);
              }
            }
          }
        }
        .food-package {
          .type {
            width: 100%;
            margin-top: 0.22rem;
            font-size: 0.26rem;
            color: rgba(136, 136, 136, 1);
          }
          .category {
            background-color: $bc;
            padding: 0.33rem 0.56rem;
            .name {
              font-weight: 600;
              height: 0.4rem;
              line-height: 0.4rem;
            }
          }
          .btn-op {
            margin-top: 0.52rem;
            @include fa();
            height: 0.64rem;
            justify-content: flex-end;
            .cancel {
              color: $blue;
              margin-right: 0.56rem;
            }
            .price {
              @include fa();
              padding: 0.08rem 0.18rem;
              background: $blue;
              border-radius: 0.08rem;
              color: $fc;
              height: 0.64rem;
              span {
                padding-right: 0.1rem;
                border-right: 1px solid $fc;
              }
              img {
                margin-left: 0.1rem;
                @include wh(0.32rem);
              }
            }
          }
        }
      }
    }
  }
}

.tooproof {
  width: 1rem;
  height: 1rem;
  // position: fixed;
  right: 0.2rem;
  bottom: 1.2rem;
  z-index: 99;
}
.tooproof img {
  width: 1rem;
  height: 1rem;
}
.tooproof{
      z-index: 99;
    // height: 251px;
    position: fixed;
    background: #fff;

}
</style>
